<template>
    <div class="box">
        <header class="tou">
            <van-nav-bar title="详情页" left-arrow @click-left="$router.go(-1)" />
        </header>
        <main class="zhong">
            <!-- <img style="width: 100%" :src="obj.image" alt="" /> -->
            <van-image width="100%" height="%100" lazy-load :src="obj.image" />
            <p>{{ obj.title }}</p>
            <p style="color: red">￥{{ obj.price }}</p>
        </main>
    </div>
    <footer class="di">
        <van-action-bar>
            <van-action-bar-icon icon="chat-o" text="客服" dot />
            <van-action-bar-icon icon="cart-o" text="购物车" :badge="store.totalCount" @click="$router.push('/cart')" />
            <van-action-bar-icon icon="shop-o" text="店铺" badge="12" />
            <van-action-bar-button type="warning" text="加入购物车" @click="addCart" />
            <van-action-bar-button type="danger" text="立即购买" />
        </van-action-bar>
    </footer>
</template>
<script setup>
import request from "@/utlis/request";
import { onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";

import { useCounterStore } from '@/stores/counter'
const store = useCounterStore()

const route = useRoute();
const router = useRouter();
const obj = ref([]);
onMounted(() => {
    request
        .get("/detail", {
            params: { id: route.params.id },
        })
        .then((res) => {
            if (res.data.code == 200) {
                obj.value = res.data.data;
            }
        });
});
const addCart = () => {
    if (localStorage.getItem('token')) {
        store.addItem(obj.value);
    }
    else {
        router.push('/login')
    }
}
</script>